<template>
	<div>
		<el-row  v-if="tableFlog">
			<el-col  >
				<!--查询部分-->
				<el-row :gutter="24">
					<el-col :span="2" style="">
						<p class="queryLabel">单位:</p>
					</el-col>
					<el-col :span="3">
						<el-input placeholder="请选择单位" size="small" icon="more" v-model="companyLabel" :on-icon-click="openDeptTree"></el-input>
					</el-col>

					<el-col :span="2">
						<p class="queryLabel">日期：</p>
					</el-col>
					<el-col :span="3">
						<el-date-picker v-model="data.dateStart" size="small" style="width:100%;" type="month" clearable placeholder="起始月份">
						</el-date-picker>
					</el-col>
					<el-col :span="1" style="">
						<p class="queryLabel">至:</p>
					</el-col>
					<el-col :span="3">
						<el-date-picker v-model="data.dateEnd" size="small" style="width:100%;" type="month" clearable placeholder="结束月份">
						</el-date-picker>
					</el-col>
					<el-col :span="5" style="text-align: right;">
						<el-button type="primary" size="small" @click="query">查询</el-button>
						<el-button type="primary" size="small" @click="downloadMonthly">导出</el-button>
						<el-button type="primary" size="small" @click="downloadMonthlyInfo">导出详情</el-button>
					</el-col>
				</el-row>
				<!--表格部分-->
				<el-table :data="receiveData" border="" show-summary stripe sum-text="汇总" style="width:100%;height: 100%;" @cell-dblclick="dbclickOn">
					<el-table-column prop="time" label="日期" width="280" sortable></el-table-column>
					<el-table-column prop="carSeries" label="车系" width="280" sortable></el-table-column>
					<el-table-column label="财务" style="text-align: center;">
						<el-table-column prop="stock1" label="暂估入库" width="190"></el-table-column>
						<el-table-column prop="stock2" label="冲估入库" width="190"></el-table-column>
						<el-table-column prop="stock3" label="正式入库" width="190"></el-table-column>
						<el-table-column prop="stock5" label="销售出库" width="190"></el-table-column>
					</el-table-column>
				</el-table>
				<!--分页-->
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-row :gutter="24" v-if="!tableFlog">
			<el-col :span="24" >
				<el-row :gutter="24" >
					<el-col :span="12" >
					<div style="font-size: 1.5em;">{{titleName}}</div>
					</el-col>
					<el-col :span="12" >
					<el-button type="primary" size="small" @click="buckIndex">返 回</el-button>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" >
				<el-row :gutter="24" >
					<el-table :data="receiveDatas" border="" show-summary stripe sum-text="汇总" style="width:100%;height: 100%;" @cell-dblclick="dbclickOn">
						<el-table-column prop="stratPrintTime" label="日期" width="160" sortable></el-table-column>
						<el-table-column prop="vin" label="VIN" width="200" sortable></el-table-column>
						<el-table-column prop="carSeries" label="车系" width="150" sortable></el-table-column>
						<el-table-column prop="carModel" label="车型" width="250" sortable></el-table-column>
						<el-table-column prop="configure" label="配置"  sortable></el-table-column>
						<el-table-column prop="invoicesPrice" label="金额" width="120" sortable></el-table-column>
					</el-table>
					<!--分页-->
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChanges" :current-page="CurentPages" :page-sizes="pages.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="totals">
				</el-pagination>
				</el-row>
			</el-col>
		</el-row>
		<!--引用单位选择模块-->
		<company :show="showCompany" v-if="showCompany" v-on:close="showCompany=false" v-on:insert="inserts"></company>
	</div>

</template>

<script>
	import moment from 'moment'
	import company from '../../insPlugins/company.vue' //单位选择模块
	export default {
		data: function() {
			return {
				//详情名称
				titleName:"",
				//详情和主页切换
				tableFlog:true,
				//每页的数量
				page: this.page,
				//每页的数量
				pages: this.page,
				//页码数
				CurentPage: 1,
				//页码数详情
				CurentPages: 1,
				//单位ID
				companyId: [],
				//单位名称
				companyLabel: "",
				//单位选择Dialog
				showCompany: false,
				//查询条件数据集
				data: {
					companyId: [], // 公司ID
					dateStart: "", // 起始时间
					dateEnd: "", // 结束时间
				},
				//查询结果接收数据集
				receiveData: [],
				total: 0,
				//查询结果接收数据集--详情
				receiveDatas: [],
				totals: 0,
				selections:{},
			}
		},
		computed: {},
		methods: {
			//双击数组
			dbclickOn:function(row, column, cell, event){
				debugger;
				this.$data.tableFlog=false;
				//组合详情名称
				this.$data.titleName=row.carSeries+column.label+row.time+"车辆详情"
				//组合查询条件
				var selecti={};
				selecti.carSeries=row.carSeries;
				selecti.month=row.time;
				selecti.type=column.property;
				this.$data.selections=selecti;
				this.queryInfo();
			},
			queryInfo:function(){
				this.$http.post(this.API_ROOT + '/scm/count/monthThrough', this.$data.selections, {
					params: {
						start: this.$data.CurentPages, //页码
						limit: this.$data.pages.pageSize, //每页的数量
					}
				}).then((response) => {
					if(response.body.success) {
						debugger;
						this.$data.receiveDatas = response.body.dataList;
						this.$data.totals = parseInt(response.body.total); //数据条数（必须强转成int类型，否则不显示）
					} else {}
				}, (response) => {});
			},
			//返回月报统计
			buckIndex:function(){
				this.$data.tableFlog=true;
			},
			//单位选择
			openDeptTree: function() {
				this.$data.showCompany = true; // 显示单位选择模块
			},
			//查询按钮
			query: function() {

				this.$data.data.companyId = this.$data.companyId; // 获取单位ID
				this.$data.data.dateStart = this.momentFu(this.$data.data.dateStart); //起始时间格式化
				this.$data.data.dateEnd = this.momentFu(this.$data.data.dateEnd); // 结束时间格式化
				debugger;
				this.$http.post(this.API_ROOT + '/scm/count/countByMonth', this.$data.data, {
					params: {
						start: this.$data.CurentPage, //页码
						limit: this.$data.page.pageSize, //每页的数量
					}
				}).then((response) => {

					debugger;
					if(response.body.success) {
						this.$data.receiveData = response.body.dataList;
						this.$data.total = parseInt(response.body.total); //数据条数（必须强转成int类型，否则不显示）
						debugger;
					} else {}

					debugger;

				}, (response) => {});

				debugger;
			},
			//导出按钮
			downloadMonthly: function() {
				this.$data.data.dateStart = this.momentFu(this.$data.data.dateStart); //起始时间格式化
				this.$data.data.dateEnd = this.momentFu(this.$data.data.dateEnd); // 结束时间格式化
				window.location.href = this.API_ROOT + '/scm/count/excel/exportMonth?uid=' + window.localStorage.getItem("uid") + "&dateStart=" + this.$data.data.dateStart + "&dateEnd=" + this.$data.data.dateEnd;
			},
			//导出按钮
			downloadMonthlyInfo: function() {
				this.$data.data.dateStart = this.momentFu(this.$data.data.dateStart); //起始时间格式化
				this.$data.data.dateEnd = this.momentFu(this.$data.data.dateEnd); // 结束时间格式化
				window.location.href = this.API_ROOT + '/scm/count/excel/exportMonthDetail?uid=' + window.localStorage.getItem("uid") + "&dateStart=" + this.$data.data.dateStart + "&dateEnd=" + this.$data.data.dateEnd;
			},
			//单位选择的回调
			inserts: function(val, lable) {

				this.$data.companyId = val; //单位ID
				this.$data.companyLabel = lable; //单位名称

				debugger;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//列表,当前页切换
			handleCurrentChanges: function(currentPage) {
				this.$data.CurentPages = currentPage;
				this.queryInfo();
			},
			//时间格式化
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},

			//测试数据
			TestgetData: function() {
				var list = [{
					"car": "1",
					"inWarehouse": "1",
				}];
				var listAdd = {
					"car": "1",
					"inWarehouse": "1"
				};
				for(var i = 0; i < 26; i++) {
					list.push(listAdd);
				}

				this.$data.receiveData = list;
				debugger;
			},
		},
		//表单创建时执行
		created: function() {
			//给单位默认值
			this.$data.companyLabel = window.localStorage.getItem("companyName");
			this.$data.companyId["0"] = window.localStorage.getItem("companyId");
			this.query();
		},
		components: {
			company
		},
	}
</script>

<style>

</style>